import { BackGroundContainer, Header, Title, List, AllList } from "./styled";
import { Button } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import { useEffect } from "react";
import { useState } from "react";
import dataManager from "@/utils/dataManager";
import indexedDBManager from "@/utils/indexedDB";
const BackGround = ({ state, dispatch }) => {
  const { backGroundUrl } = state;
  const backgroundUrl = [
    "/img/wallpaper/dark/img0.jpg",
    "/img/wallpaper/default/img0.jpg",
    "/img/wallpaper/ThemeA/img0.jpg",
    "/img/wallpaper/ThemeA/img1.jpg",
    "/img/wallpaper/ThemeA/img2.jpg",
    "/img/wallpaper/ThemeA/img3.jpg",
    "/img/wallpaper/ThemeB/img0.jpg",
    "/img/wallpaper/ThemeB/img1.jpg",
    "/img/wallpaper/ThemeB/img2.jpg",
    "/img/wallpaper/ThemeB/img3.jpg",
    "/img/wallpaper/ThemeC/img0.jpg",
    "/img/wallpaper/ThemeC/img1.jpg",
    "/img/wallpaper/ThemeC/img2.jpg",
    "/img/wallpaper/ThemeC/img3.jpg",
    "/img/wallpaper/ThemeD/img0.jpg",
    "/img/wallpaper/ThemeD/img1.jpg",
    "/img/wallpaper/ThemeD/img2.jpg",
    "/img/wallpaper/ThemeD/img3.jpg",
  ];

  const [userBackground, setUserBackground] = useState([])

  const getBackgroundData = async () => {
    try {
      const currentUser = await dataManager.getCurrentUser();
      if (currentUser) {
        const images = await indexedDBManager.getImagesByUser(currentUser.uid);
        setUserBackground(images.map(img => img.data)); // 使用base64数据
      }
    } catch (error) {
      console.error('获取背景图片失败:', error);
    }
  }

  useEffect(() => {
    // 初始化、挂载
    getBackgroundData()
    // 销毁生命周期
    return () => {
    }
  }, [])

  const setBackGround = async (url) => {
    try {
      // 前端替换
      localStorage.setItem("background", url);
      dispatch({
        type: "setState",
        payload: {
          backGroundUrl: url,
        },
      });

      // 更新用户背景设置
      await dataManager.updateUser({ background: url });
    } catch (error) {
      console.error('设置背景失败:', error);
    }
  };

  return (
    <BackGroundContainer>
      <Header>
        <Title>设置背景图片</Title>
        <Button
          onClick={() => {
            dispatch({
              type: "setState",
              payload: {
                isShowBackGround: false,
              },
            });
          }}
          icon={<CloseOutlined />}
          type="text"
        ></Button>
      </Header>
      <AllList>
        {
          userBackground.length ? (
            <div>
              <div style={{ fontSize: '12px', marginLeft: "10px" }}>用户上传背景</div>
              <List>
                {
                  userBackground.map((item, index) => (
                    <List.item
                      url={item}
                      key={index}
                      isSelect={item === backGroundUrl}
                      onClick={() => setBackGround(item)}
                    ></List.item>
                  ))
                }
              </List>
              <div style={{ fontSize: '12px', marginLeft: "10px" }}>系统默认图片</div>
            </div>
          ) : null
        }

        <List>
          {backgroundUrl?.map((item, index) => (
            <List.item
              url={item}
              key={index}
              isSelect={item === backGroundUrl}
              onClick={() => setBackGround(item)}
            ></List.item>
          ))}
        </List></AllList>
    </BackGroundContainer>
  );
};

export default BackGround;
